

/* Admin layout ------------------------------------------------------------- */

html, body {
  height:100%;
  width:100%;
  margin:0; padding:0;
  font-family:arial;
  text-align:left;
}



/* tasty headings */

h1, h2 {
  -webkit-text-stroke:0.05em rgba(0,0,0,0.15);
  margin:0;
  padding-top:0.75em;
  padding-bottom:0.5em;
  font-family:arial;
  color:#373737;
  text-align:center;
}




body {
  background:url('../img/metal5.png');
  /**
  background:url('../img/HorseheadNebula.jpg') center center fixed;
  background-size: auto 100%;
  /**/
}

#userline {
  float:right;
  padding-right:0.5em;
  padding-top:2px;
  padding-bottom:2px;
}

#userline a {
  color:blue;
}

.toolbar_head {
  float:left;
}
.toolbar_head a {
  color:black;
  text-decoration:none;
  padding-left:0.5em;
  padding-right:0.5em;
  float:left;
  padding-top:2px;
  padding-bottom:3px;
  -webkit-transition: background-color 0.25s linear;
}

.toolbar_head a:hover {
  background-color: #ccc;
}

.toolbar_head .separator {
  display:block;
  float:left;
  color:gray;
  border:1px inset;
  height:100%;
  margin:0;
  height:16px;
  opacity:0.75;
  margin-left:0.2em;
  margin-right:0.2em;
}

#top_toolbar {
  /**/
  position:fixed;
  top:0;
  left:0;
  /**/
  width:100%;
  height:19px;
  z-index:99999;


  /* made using http://gradients.glrzad.com/ */
  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(1, rgb(240,240,240)),
      color-stop(0.65, rgb(224,224,224)),
      color-stop(0, rgb(197,197,197))
  );

  background:-moz-linear-gradient(
      center bottom,
      rgb(196,196,196) 0%,
      rgb(224,224,224) 70%,
      rgb(240,240,240) 100%
  );
}

#top_toolbar {
  font-family:verdana;
  font-size:12px;
  width:100%;

  -webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.30);
  -moz-box-shadow:1px 1px 4px rgba(0,0,0,0.30);
}

#visual_editor_iframe {
  height:100%;
  width:100%;
  border:none;
}

#layout_table, #layout_table tbody, #layout_table tr, #layout_table td {
  margin:0; padding:0;
}
#layout_table {
  width:100%;
  height:100%;
}


.layout_list {
  display:block;
  width:300px;
  margin-left:auto;
  margin-right:auto;
  background-color:white;
  border-radius:12px;
  padding-top:12px;
  padding-bottom:12px;
}

.layouts {
  /*center the button*/
}

.layout_list a {
  color:blue;
}


#bottom_toolbar td, #bottom_toolbar {
  position:fixed;
  top:20px;
  left:0;
  bottom:0;
  width:100%;
  overflow:auto;
}


textarea {
  margin-bottom:2px;
  font-size:1.1em;
}

.PageThing {
  font-family:arial;
  width:800px;
  margin-left:auto;
  margin-right:auto;
  border-top:3px solid #ddd;
}
.MenuThing a {
  color:blue;
}
.SidebarContainer .Thing {
  border-bottom:1px solid #ddd;
}
.SidebarContainer {
  float:left;
  width:170px;
  margin-right:25px;
}
.SidebarContainer .TextThing {
  font-size:0.95em;
}
.ContentContainer {
  float:left;
  width:600px;
}
.FooterContainer {
  clear:both;
  margin-top:1.5em;
  border-top:3px solid #ddd;
  text-align:center;
}




form, h1 {
  max-width:750px;
  margin-left:auto;
  margin-right:auto;
}

#bottom_toolbar td > form {
  padding-bottom:1em !important;
}



/* Structure editor --------------------------------------------------------- */

.structure-editor .NodeMenu {
  /*float:left;*/
  margin-right:1.25em;
}
.structure-editor .NodeMenu,.structure-editor  .NodeMenu ul {
  margin-left:0;
  padding-left:0;
}
.structure-editor .NodeMenu li {
  list-style-type:none;
}
.structure-editor .NodeMenu li li {
  margin-left:15px;
}
.structure-editor .NodeMenu li a {
  color:black;
  text-decoration:none;
}
.structure-editor {
  width:600px;
  margin-left:auto;
  margin-right:auto;
}



/* Site Designer ------------------------------------------------------------ */


#site_designer {
  width:74%;
  margin:0; padding:0;
  border:0;
  float:left;
}
#css_editor {
  margin:0; padding:0;
  width:25%;
  /*height:50em;*/
  float:right;
}
#css_editor textarea {
  font-size:13px;
  font-family:consolas;
}

.foldable-area .CodeMirror-wrapping {
  max-height:600px;
  overflow:auto;
  border:1px solid gray;
}

.foldable-hide .foldable-area {
  display:none;
}

.foldable-title {
  background-color:#eee;
  border:1px solid #ccc;
  border-bottom:none;
  font-size:0.9em;
  font-weight:bold;
  padding:2px;
  padding-left:4px;
  display:block;
  color:black;
  text-decoration:none;
}

.foldable .last {
  border-bottom:1px solid #ccc;
}






/* creator window ----------------------------------------------------------- */


.creatorWindow {
  /*padding:1px;*/
  margin-bottom:0em;
  position:relative;
  /*border:inset 1px;*/
}

.creatorWindow {
  background-color:white;
  border-radius:10px;
  /*padding:8px;*/
  clear:both;
  margin-bottom:8px;
  -webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.30);
  -moz-box-shadow:1px 1px 4px rgba(0,0,0,0.30);

}

.creatorWindow .inner {
  padding-top:8px;
  padding-left:6px;
  padding-right:6px;
  padding-bottom:6px;
}




.creatorWindow-empty .inner {
  display:none;
}


.creatorWindow-PageThing {
  width:800px;
  margin-left:auto;
  margin-right:auto;
}

.creatorWindow .controls .InputText {
  font-family:verdana;
}

.creatorWindow .controls {
  width:99%;
  width:100%;
  height:24px;
  clear:both;

  border-radius:10px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;

  /* made using http://gradients.glrzad.com/ */
  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(1, rgb(240,240,240)),
      color-stop(0.65, rgb(224,224,224)),
      color-stop(0, rgb(197,197,197))
  );

  background:-moz-linear-gradient(
      center bottom,
      rgb(196,196,196) 0%,
      rgb(224,224,224) 70%,
      rgb(240,240,240) 100%
  );
  border-bottom:1px solid #aaa;
}

.creatorWindow-empty .controls {
  border-radius:10px;
}

.creatorWindow-empty .buttons .last {
  border-bottom-right-radius:10px;
}



.creatorWindow .controls .buttons {
  position:relative;
  float:right;
}


.controls .label input {
  font-size:0.85em;
  margin-left:0.25em;
  margin-right:0.5em;
  margin-top:0;
  width:120px;
  border-radius:8px;
  position:relative;
  top:-1px;
  padding-left:6px;
}

.controls .label label {
  margin-left:0.5em;
}

.controls .buttons input, .controls .label .SubmitButton {
  border-radius:0;
  margin:0;
  margin-right:0;
  margin-left:0;
  float:left;
  width:32px;
  padding:0;
  /*padding-right:0;*/
  text-align:center;
  font-size:14px;
  height:24px;
  line-height:100%;

  border-left:1px solid gray;
  border-color: rgba(0,0,0, 0.1);
}

.creatorWindow-empty {
  padding:0 !important;
}
.creatorWindow-empty .label .SubmitButton {
  border-bottom-left-radius:10px;
}



.controls .buttons .SubmitButton:hover {
  -webkit-box-shadow:1px 3px 3px rgba(0,0,0,0.30);
  -moz-box-shadow:1px 3px 3px rgba(0,0,0,0.30);
}


.controls .buttons input {
  -webkit-box-shadow:none;
}


.controls .label .SubmitButton {
  float:left;
  border:none;
  position:relative;
  top:-3px;
  left:-8px;
  margin-right:-8px;
  width:26px;
}

.controls .buttons .first {
  /*border-bottom-left-radius:12px;*/
  /*
  border-top-left-radius:12px;
  */
}
.controls .buttons .last {
  /*border-bottom-right-radius:12px;*/
  border-top-right-radius:12px;
  border-right:none;
}



.creatorWindow .label {
  display:block;
  float:left;
  color:#333;
  font-size:12px;
  padding-top:3px;
  padding-left:8px;
}

.creatorWindow .label .SubmitButton {
  border-top-left-radius:12px;
  -webkit-box-shadow:none;
}

.creatorWindow .label .SubmitButton:hover {
  -webkit-box-shadow:-2px 2px 3px rgba(0,0,0,0.30);
  -moz-box-shadow:-2px 2px 3px rgba(0,0,0,0.30);
}



.creatorWindow .controls .buttons {
  /*
  position:relative;
  top:-17px;
  right:0px;
  */
  font-size:12px;
}

.creatorWindow .inner {
   /*margin-bottom:4px;*/
}

.creatorWindow .label {
  /*display:none;*/
  /*float:left;*/
  /*font-weight:bold;*/
  /*text-shadow: #333 0px 0px 2px;*/
  /*margin-left:0.4em;*/
}

.pager-items .item {
  width:100%;
  border-bottom:1px solid silver;
  padding:4px;
}


.creatorWindow-PageMeta {
  background-color:#ffa;
}

.creatorWindow-PageMeta h2 {
  /*display:none;*/
  margin:0;
}

.creatorWindow-PageMeta .creatorWindow-TitleThing .inner input {
  font-size:1em;
}
.creatorWindow-PageMeta .creatorWindow {
  padding-bottom:6px;
}

.creatorWindow-PageMeta label {
  /*float:left;*/
  margin-right:0.5em;
}


.creatorWindow .controls .SubmitButton-pushed,
.creatorWindow .controls .SubmitButton-pushed:hover {
  /*
  position:relative;
  border:1px solid silver;
  border-bottom: none;
  display:block;
  z-index:1050;
  background:white !important;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  */
  color:white;
}




/* pretty buttons --------------------------------------------------------- */



.creatorWindow .controls .buttons a, a.button, input[type="submit"] {
  border:none;
  display:inline;

  color:#333;
  text-decoration:none;

  font-size:14px;

  line-height:30px;
  padding-left:12px;
  padding-right:12px;

  padding-top:3px;
  padding-bottom:3px;

  /* chrome renders the gradient to shadow better with this on */
  background-color:#ddd;


  -webkit-border-radius:12px;
  -moz-border-radius:12px;
  -webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.30);
  -moz-box-shadow:2px 2px 3px rgba(0,0,0,0.30);
  
  text-shadow: #eee 1px 1px 2px;


  cursor:default;

 /* made using http://gradients.glrzad.com/ */
 background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(1, rgb(240,240,240)),
      color-stop(0.65, rgb(224,224,224)),
      color-stop(0, rgb(197,197,197))
  );

  background:-moz-linear-gradient(
      center bottom,
      rgb(196,196,196) 0%,
      rgb(224,224,224) 70%,
      rgb(240,240,240) 100%
  );

  -webkit-transition: color 0.15s linear;
  -webkit-transition: text-shadow 0.15s linear;
  -webkit-transition: -webkit-box-shadow 0.15s linear;
}




/* fix for different rendering on inputs */
input[type="submit"] {
  line-height:16px;
  padding-right:10px;
  padding-left:11px;
}

.creatorWindow .controls .buttons a:hover, a.button:hover, input[type="submit"]:hover {
  color:#111;
  text-shadow: #fff 1px 1px 2px;
  -webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.75);

  /* made using http://gradients.glrzad.com/ */
   background-image:-webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(1, rgb(240,240,240)),
      color-stop(0.65, rgb(230,230,230)),
      color-stop(0, rgb(187,187,187))
  );
  background:-moz-linear-gradient(
      center bottom,
      rgb(187,187,187) 0%,
      rgb(230,230,230) 65%,
      rgb(240,240,240) 100%
  );

}
.creatorWindow .controls .buttons a:active, a.button:active, input[type="submit"]:active {
  position:relative;
  top:1px;
}





/* </pretty buttons> */




.creatorWindow-SidebarContainer {
  float:left;
  width:250px;
}
.creatorWindow-ContentContainer {
  float:left;
  width:540px;
}
a.add {
  display:block;
  text-align:center;
}
.creatorWindow-FooterContainer {
  clear:both;
}
.creatorWindow-TitleThing .inner input {
  font-size:2em;
  width:99%;
}


  #title {
    padding:0;
    margin:0;
    margin-right:0.25em;
    margin-left:0;
    display:block;
    float:left;
  }
/*  
  iframe {
    border:none;
    width:100%;
    height:90%;
    padding:0;
    margin:0;
  }
*/
  #menu {
    padding:0;
    margin:0;
    margin-top:1px;
  }
  #menu li {
    display:block;
    float:left;
  }
  #menu li a {
    color:black;
    text-decoration:none;
    margin-right:6px;
  }


.content-list .item {
  padding-right:0.5em;
}

.content-list .item a {
  color:black;
  text-decoration:none;
  border-bottom:1px solid #ddd;
  display:block;
  padding-right:0.5em;
}

.content-list .item a:hover {
  border-bottom:1px solid #777;
}


/* Content template editor -------------------------------------------------- */

.ContentTemplates h1 {
  margin-top:0.2em;
}

.contentTemplateList {
  width:440px;
  margin-left:auto;
  margin-right:auto;
  padding-top:0.5em;
}
.contentTemplate {
  display:block;
  width:96px;
  height:150px;
  /*border:1px solid silver;*/
  float:left;
  margin-right:10px;
  margin-bottom:1em;
}
.contentTemplate .icon {
  width:96px;
  height:118px;
  border:1px solid #999;
  margin-bottom:4px;
  -webkit-box-shadow:0px 0px 3px rgba(0,0,0, 0.25);
  background-color:#ccc;
  overflow:hidden;
  position:relative;
  -webkit-transition: -webkit-box-shadow 0.3s linear;
  -webkit-transition: background 0.3s linear;
}
.contentTemplate .icon span {
  font-size:6em;
  position:relative;
  left:-0.25em;
  top:0.25em;
  color:#fff;
  text-shadow: #ddd 0px 0px 16px;
  -webkit-transition: text-shadow 0.3s linear;
}
.contentTemplate a {
  text-decoration:none;
  color:#555;

  -webkit-transition: color 0.5s linear;
}
.contentTemplate a:hover {
  color:black;

}
.contentTemplate a:hover .icon {
  -webkit-box-shadow:0px 0px 6px rgba(0,0,0, 0.40);
  background-color:#777;
}
.contentTemplate a:hover .icon span {
  text-shadow: #aaa 0px 0px 16px;
}


.thing-meta {
  clear:both;
  background-color:#eee;
  border-top:1px solid #ccc;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:4px;
  padding-right:4px;
  margin-top:0.75em;
  font-size:0.8em;
  /*opacity:0.40;*/
}
.thing-meta:hover {
  /*opacity:1;*/
}

.thing-meta input {
  font-size:1em;
  margin-right:0.5em;
}

.thing-meta label {
  
}
.thing-meta span {
  color:gray;
  float:right;
}

.thing-default-content {
  padding:4px;
  border-left:1px solid #f2f2f2;
}


/* coloured boxes ----------------------------------------------------------- */

.creatorWindow-TemplateThing {
  background-color:#8f6;
}



/* yui menu ----------------------------------------------------------------- */

.yuimenu {
  background:url('../img/context_menu.png');
  background-color:white;
  font-size:12px;
  padding:0;
  margin:0;
  border:1px solid silver;
  -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.35);
  /*-moz-box-shadow*/
}

.yuimenu ul {
  padding:0;
  margin:0;
  padding-bottom:2px;
  padding-top:2px;
}


.yuimenu li {
  list-style-type:none;
  padding:0;
  margin:0;
  display:block;
}

.yuimenu li a {
  display:block;
  color:black;
  text-decoration:none;
  line-height:150%;
  padding-left:10px;
  padding-right:20px;
}

.yuimenu li a:focus {
  outline:none;
}

.yuimenu li a:hover, .yuimenu  .yuimenuitemlabel-selected {
  background-color:rgba(190, 235, 255, 0.75);
}

.yuimenuitemlabel-hassubmenu {
  background:url(../img/menuitem_submenuindicator.png) 50% right no-repeat;
}





/* TDD ---------------------------------------------------------------------- */

.tests {
  padding-left:1em;
  padding-right:1em;
  padding-top:0.6em;
  padding-bottom:0.6em;
}

.tests .result:first-child {
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

.tests .result:last-child {
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
}

.unit-test .result {
  padding:0.25em;
  padding-left:0.5em;
  color:white;
  -webkit-box-shadow:1px 2px 3px rgba(0,0,0, 0.3);
  margin-bottom:1px;
}

.unit-test .result .result-heading a {
  color:black;
}

.unit-test .result .result-heading {
  display:block;
  color:black;
  font-family:consolas, 'cuourier new';
}

.result-red {
  border-left:10px solid red;
  background:#ddd;
  color:black;
}



.unit-test .faults {
  border-radius:4px;
  margin:0;
  margin-top:0.25em;
  padding:0.5em;
  background:white;
  color:black;
  overflow:auto;
}

.unit-test .run_in_terminal {
  display:block;
  float:right;
  text-align:right;

}
.unit-test .run_in_terminal input {
  background:url(../icons/terminal_22.png) bottom left no-repeat;
  padding:4px;
  padding-top:1px;
  padding-left:28px;
  margin-left:0.6em;
  border:none;
  border-radius:0;
  -webkit-box-shadow:none;
  color:gray;
  margin-right:0.5em;
  position:relative;
  top:-1px;
}

.unit-test .result-green .run_in_terminal input {
  color:#070;
  text-shadow: rgba(255,255,255, 0.8) 1px 1px 1px;
  text-shadow: rgba(255,255,255, 0.6) 1px 1px 2px;
}


.unit-test .run_in_terminal input {
  
}

.Console .unit-test .run_in_terminal {
  display:none;
}


.unit-test .fault  {
  margin-top:0.5em;
  margin-bottom:1em;
}

.fault .heading {
  /*background-color:yellow;*/
  padding:0.3em;
}

.fault .trace {
  padding-left:1.5em;
  padding-top:0.25em;
  font-size:0.9em;
  color:#777;
  font-family:consolas, 'cuourier new';
}

.unit-test .result-green {
  border-left:10px solid #0a0;
  background:#ddd;
  background-color:#0a0;

}

.result a {
 color:black;
 text-decoration:none;
}
.result a:visited {
 color:black;
}


.tests-all .faults {
  display:none !important;
}

.tests-all .result {

}
.unit-test .result .result-heading {
  position:relative;
  top:2px;
  color:black;
}

.unit-test .result-green .result-heading,
.unit-test .result-green .result-heading a {
  color:white;
}




/* Console ------------------------------------------------------------------ */

#bottom_toolbar .Console .log {
  background:none;
  padding-top:0.6em;
  overflow:inherit;
}

#bottom_toolbar .Console .log > * {
}

#bottom_toolbar .Console {
  margin-left:1em;
  margin-right:1em;
}

/* nice block*/
.Console .log > .result,
.Console .log .puts,
.Console .log .exception,
.Console .log .exception_message,
.Console .log .exception_trace {
  background-color:#222;
  border-radius:10px;
  margin-bottom:0.5em;
  -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.30);
  -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.30);
  padding-top:4px;
  padding-left:7px;
  font-size:14px;
}

.Console .log .exception_message {
  color:yellow;
  white-space:pre;
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
  margin-bottom:0;
  border-bottom:1px solid #444;
}
.Console .log .exception_trace {
  border-top-right-radius:0;
  border-top-left-radius:0;
  white-space:pre;
  font-size:0.8em;
  background-color:#333;
  padding-top:5px;
  padding-bottom:5px;
}

.Console .log .puts {
  color:silver;
}


.Console .log {
}

.Console .code,
.Console .puts,
.Console .result
{
  overflow: hidden;
}


.Console .log .puts {

}

.Console .unit-test {
  margin-left:-7px;
  margin-top:-4px;
}
.Console .unit-test .result {
  border-radius:10px;
}

.Console .code {
  color:black;
  margin-top:1.25em;
  margin-bottom:0.25em;
}

#bottom_toolbar .Console .command {
  background:none;
  color:black;
  font-size:16px;
  margin-top:0.5em;
  margin-bottom:0.5em;
}

#bottom_toolbar .Console .command textarea {
  background:rgba(255,255,255, 0.68);
  -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.25);
  -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.25);
  border-radius: 4px;
}


#bottom_toolbar .Console .command textarea:focus {
  outline:none;
  -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.50);
  -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.50);
}

#bottom_toolbar .Console .command textarea {
  color:black;
  padding-bottom:0.5em;
  position:relative;
  top:-1px;
}

#bottom_toolbar .Console .command .arrow {
  padding-left:0;
}